<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Andy.tool</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="/resources/common/css/bootstrap4/bootstrap.min.css" >
        <link rel="stylesheet" href="/resources/common/css/font-awesome.min.css" >
        <link rel="stylesheet" href="/resources/common/Shards-Version-2.0.3/css/shards.min.css?version=2.0.1">
        <link rel="stylesheet" href="/resources/common/Shards-Version-2.0.3/css/shards-extras.min.css?version=2.0.1">
        <link rel="stylesheet" href="/resources/common/codemirror-5.37.0/lib/codemirror.css">
		<!--引入css文件，用以支持主题-->
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/theme/eclipse.css">
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/theme/seti.css">
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/theme/dracula.css">

		<!--引入js，绑定Vim-->
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/addon/dialog/dialog.css">

		<!--支持代码折叠-->
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/addon/fold/foldgutter.css"/>

		<!--全屏模式-->
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/addon/display/fullscreen.css">

		<!--自动补全-->
		<link rel="stylesheet" href="/resources/common/codemirror-5.37.0/addon/hint/show-hint.css">
    </head>
<body >
     	
  <div class="fixedNavbar">
		<#include "../../navbar.html">
	</div>
	
	<div class="container-fluid">
		<textarea id="text" >
		</textarea>
        <div class="btn-group btn-group-xs">
		    <button id="jsonize" type="button" class="btn btn-primary">JSON化</button>
		    <button id="undo" type="button" class="btn btn-warning">undo</button>
		    <button id="fullscreen" type="button" class="btn btn-success">全屏(ESC/F11退出)</button>
		    <button id="clear" type="button" class="btn btn-default">Clear</button>
		</div>
	</div>

	<div class="fixedNavbar">
		<#include "../../footer.html">
	</div>


	<script src="/resources/common/js/jquery-3.3.1.min.js" ></script>
	<script src="/resources/common/js/jquery.jsonview.min.js" ></script>
	<script src="/resources/common/js/bootstrap4/bootstrap.min.js"></script>
	<script src="/resources/common/codemirror-5.37.0/lib/codemirror.js"></script>
	<script src="/resources/common/codemirror-5.37.0/mode/clike/clike.js"></script>
	<script src="/resources/common/codemirror-5.37.0/mode/javascript/javascript.js"></script>
	<!--引入js，绑定Vim-->
	<script src="/resources/common/codemirror-5.37.0/keymap/vim.js"></script>
	<script src="/resources/common/codemirror-5.37.0/keymap/sublime.js"></script>
	<script src="/resources/common/codemirror-5.37.0/addon/search/searchcursor.js"></script>
	<!--改善vim输入命令时的样式-->
	<script src="/resources/common/codemirror-5.37.0/addon/dialog/dialog.js"></script>
	<!--引入js，绑定Vim-->
	<script src="/resources/common/codemirror-5.37.0/keymap/vim.js"></script>
	<script src="/resources/common/codemirror-5.37.0/addon/search/searchcursor.js"></script>
	<!--改善vim输入命令时的样式-->
	<script src="/resources/common/codemirror-5.37.0/addon/dialog/dialog.js"></script>
	<!--全屏模式-->
	<script src="/resources/common/codemirror-5.37.0/addon/display/fullscreen.js"></script>
	<!--括号匹配-->
	<script src="/resources/common/codemirror-5.37.0/addon/edit/matchbrackets.js"></script>


  	<script type="text/javascript">
  		$(function(){

  			var myTextArea = document.getElementById("text");
	  		var editor=CodeMirror.fromTextArea(myTextArea,{
			//Java高亮显示
			mode:"application/json",

			//显示行号
			lineNumbers:true,

			//设置主题
			theme:"seti",

			//绑定Vim
			keyMap:"sublime",

			//代码折叠
			lineWrapping:true,
			foldGutter: true,
			gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

			//全屏模式
			fullScreen:false,

			//括号匹配
			matchBrackets:true,

			//智能提示 
			extraKeys:{"Ctrl-Space":"autocomplete"}//ctrl-space唤起智能提示
			,
			lineWiseCopyCut: false,  /*true时，如果当前没有选中文本，会自动选中当前行*/
            dragDrop: true,   /*是否可以被拖拽*/
            autofocus: true,
            indentUnit: 4,
            styleActiveLine: true, //line选择是是否加亮
		});

	  	editor.setOption("extraKeys", {
	        // Tab键换成4个空格
	        Tab: function(cm) {
	            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
	            cm.replaceSelection(spaces);
	        },
	        // F11键切换全屏
	        "F11": function(cm) {
	            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
	        },
	        // Esc键退出全屏
	        "Esc": function(cm) {
	            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
	        }
	    });

		/*setTimeout(function(){//假设两秒后才获取到数据
            editor.setValue(JSON.stringify(obj,null,4))//JSON.stringify()方法的第三个参数的目的就是保留格式的，如果没有的话，
        },2000)     */
	  	$('#jsonize').click(function(){
	  		editor.setValue(JSON.stringify(JSON.parse(editor.getValue()),null,4))
		});

		$('#undo').click(function(){
	  		editor.undo();
		});

		// $('#copy').click(function(){
		// 	document.execCommand("Copy");
		// 	alert('复制成功');
		// });

		$('#clear').click(function(){
	  		editor.setValue('');
		});

		$('#fullscreen').click(function(){
			editor.setOption("fullScreen",true);
		});

  	})

  		function getCodeMirrorNative(target) {
		    var _target = target;
		    if (typeof _target === 'string') {
		        _target = document.querySelector(_target);
		    }
		    if (_target === null || !_target.tagName === undefined) {
		        throw new Error('Element does not reference a CodeMirror instance.');
		    }

		    if (_target.className.indexOf('CodeMirror') > -1) {
		        return _target.CodeMirror;
		    }

		    if (_target.tagName === 'TEXTAREA') {
		        return _target.nextSibling.CodeMirror;
		    }

		    return null;
		};

  </script>
</body>
</html>
